<template>
  <view class="tab-container">
    <my-navbar-top :is-show-search="true"></my-navbar-top>
    <view class="home">
      <view class="panel">
        <view class="title" style="text-align: center;">热门推荐</view>
        <view class="list">
          <view
            class="item"
            v-for="(item, index) in suggestList"
            :key="index"
            @click="handleClick(item)"
          >
            <image :src="item.image" mode="heightFix" style="width:100%;height:100%;"></image>
            <view class="shadow">
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>
      <view class="flex panel-list" style="justify-content: space-between">
        <view @click="moreClick(item)" class="panel" v-for="(item, index) in moreList" :key="index">
          <view class="title" style="text-align: center;">{{ item.name }}</view>
          <view class="list">
            <view class="item">
              <image :src="item.image" mode="heightFix" style="width:100%;height:100%;"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <custom-tab-bar :current="0"></custom-tab-bar>
  </view>
</template>

<script>
import api from '@/utils/api/index.js'
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      suggestList: [],
      moreList: [],
    }
  },
  onShow() {
    uni.removeStorageSync('selectedBrand')
  },
  mounted() {
    console.log(api, '--')
    wx.login({
      success: (res) => {
        console.log(res, 'res')
        api
          .wxAuth({
            code: res.code,
            unionid: '',
          })
          .then((res) => {
            let { user } = res.data
            if (user) {
              uni.setStorageSync('userInfo', user)
            }
            uni.setStorageSync('unionid', user.unionid)
            console.log(res, 'res-登录')
          })
      },
    })
    this.initData()
  },
  methods: {
    initData() {
      this.$api.getHotRecommend().then((res) => {
        console.log(res, 'res-热门推荐')
        this.suggestList = res.data.hot || []
        this.moreList = res.data.more || []
      })
    },
    handleClick(item) {
      uni.navigateTo({
        url: `/pages/home/list/index?product_type_one_id=${item.id}`,
      })
    },
	moreClick(item){
		if(item.id == 7){
			uni.navigateTo({
			  url: '/pages/new/index',
			})
		}else{
			uni.navigateTo({
			  url: `/pages/home/list/index?product_type_one_id=${item.id}`,
			})
		}
	}
  },
}
</script>

<style lang="scss" scoped>
.home {
  flex: 1;
  padding: 30rpx;
  box-sizing: border-box;
  color: #545454;
  box-sizing: border-box;
  overflow-y: auto;

  .panel-list {
    margin-top: 24rpx;
    flex-wrap: wrap;
  }

  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 24rpx;

    .item {
      width: 338rpx;
      height: 338rpx;
      margin-bottom: 24rpx;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;

      .shadow {
        width: 100%;
        height: 94rpx;
        background: rgba($color: #000000, $alpha: 0.25);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        text-align: center;
        color: #fff;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
